<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="" width="600" height="400"></canvas>
<script>
	var myCanvas = document.querySelector('canvas');
	var ctx = myCanvas.getContext('2d');
	
	// 1.绘制坐标系
	// 2.确定原点
	// 3.确定距离画布旁边的距离
	// 4.确定箭头的大小 是个等腰三角形 10
	// 6.绘制箭头填充
	
	var space = 20;
	var arrowSize = 10;
	
	// 计算原点
	var canvasWidth = ctx.canvas.width;
	var canvasHeight = ctx.canvas.height;
	
	var x0 = space;
	var y0 = canvasHeight - space;
	
	// 绘制 X 轴
	ctx.beginPath();
	ctx.moveTo(x0,y0);
	ctx.lineTo(canvasWidth - space, y0);	
	// 箭头
	ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
	ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
	ctx.lineTo(canvasWidth - space, y0);
	ctx.fill();
	ctx.stroke();
	
	
	// 绘制y轴
	ctx.beginPath();
	ctx.moveTo(x0,y0);
	ctx.lineTo(space,space);
	// 箭头
	ctx.lineTo(space + arrowSize / 2,space + arrowSize);
	ctx.lineTo(space - arrowSize / 2,space + arrowSize);
	ctx.lineTo(space,space);
	ctx.fill();
	ctx.stroke();
</script>
</body>
</html>